<template>
	<view class="outBox">
    <u-navbar leftText="玩法说明" leftIconColor="#fff" :autoBack="true" bgColor="rgba(0, 0, 0, 0.6)">
      <view class="left-slot" slot="left">
        <u-icon name="arrow-left" color="#fff"></u-icon>
        <text>{{ '玩法说明' }}</text>
      </view>
    </u-navbar>
    <view class="content" >
      <view class="img">
        <image :src="baseImgUrl + 'pic/1.jpg'" mode="widthFix"/>
        <image :src="baseImgUrl + 'pic/2.jpg'" mode="widthFix"/>
        <image :src="baseImgUrl + 'pic/3.jpg'" mode="widthFix"/>
      </view>
    </view>
  </view>
</template>

<script>
	import {getWXStatusHeight} from "@/utils";

  export default {
		data() {
			return {
        videoUrl: this.$videoUrl,
        baseImgUrl: this.$baseImgUrl,
        menuHeight: 0,
			}
		},
    onLoad() {
      let obj = getWXStatusHeight()
      this.menuHeight = obj.menuHeight
    },
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
.outBox {
  display: flex;
  flex-direction: column;
}
.content{
  image{
    width: 100%;
  }
  .img{
    font-size: 0;
  }
}

.left-slot{
  display: flex;
  align-items: center;
  color: #fff;
}
.bgBox {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保视频填充整个容器，可能会裁剪视频 */
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 0;
}

</style>
